<script setup lang="ts">
import {ref, watch} from 'vue'

// 接收父组件传递的数据
const props = defineProps({
  visible: Boolean,
  data: Object,
  title: String,
  projectList: Array
})

// 弹框属性------------------------
// 隐藏显示
const visible = ref(false)
// 距离头部距离
const top = ref('50px')
const cancelBtn = ref(null)
const closeBtn = ref(null)
const confirmBtn = ref(null)

// 表单属性--------------------------
const dialogForm = ref(null)
const formData = ref({
  planName: '',
  projectPlans: [
    {
      executeCycle: 1,
      executeFrequency: 2,
      executeTime: '08:00',
      projectId: null
    }
  ],
  remark: '',
  sortNo: 1,
  status: 1
})
// 服务项目执行周期
const cycleList = ref([
  {label: '每天', value: 0},
  {label: '每周', value: 1},
  {label: '每月', value: 2}
])

const ProjectPlancolumns = [
  {
    title: '护理项目名称',
    colKey: 'projectId'
  },
  {
    title: '期望服务时间',
    colKey: 'executeTime'
  },
  {
    title: '执行周期',
    colKey: 'executeCycle'
  },
  {
    title: '执行频率',
    colKey: 'executeFrequency'
  },
  {
    colKey: 'op',
    title: '操作'
  }
]

// 添加护理项目
const addProject = () => {
  const project = {
    executeCycle: 1,
    executeFrequency: 2,
    executeTime: '08:00',
    projectId: null
  }
  formData.value.projectPlans.push(project)
}

// 删除护理项目
const deleteProject = (rowIndex) => {
  if (formData.value.projectPlans.length > 1) {
    formData.value.projectPlans.splice(rowIndex, 1)
  }
}

const rules = {
  name: [
    {required: true, message: '项目名称必填', type: 'error', trigger: 'blur'},
    {whitespace: true, message: '项目名称不能为空'},
    {min: 1, message: '项目名称在1到10之间', type: 'error', trigger: 'blur'},
    {max: 10, message: '项目名称在1到10之间', type: 'error', trigger: 'blur'}
  ]
}

const emits = defineEmits(['dialogCloseEmit', 'onFormSubmitEmit'])
// 表单提交, 通知父组件新增数据
const submit = ({validateResult}) => {
  if (validateResult) {
    emits('onFormSubmitEmit', formData.value)
  }
}
// 弹窗关闭, 需要将最新状态传递到父组件
const close = () => {
  // 重置表单数据
  dialogForm.value.reset()
  // 清空校验信息
  dialogForm.value.clearValidate()
  formData.value.projectPlans = [
    {
      executeCycle: 1,
      executeFrequency: 1,
      executeTime: '08:00',
      projectId: null
    }
  ]
  emits('dialogCloseEmit')
}

// 监听父组件传递的数据变化
watch(
    () => props.visible,
    () => {
      visible.value = props.visible
      if (visible.value) {
        dialogForm.value.clearValidate()
      }
    }
)
// 监听表单数据变化
watch(
    () => props.data,
    () => {
      formData.value = props.data
    },
    {deep: true}
)
</script>

<template>
  <!-- 新增编辑弹框 -->
  <t-dialog
      v-model:visible="visible"
      :top="top"
      :cancelBtn="cancelBtn"
      :closeBtn="closeBtn"
      :confirmBtn="confirmBtn"
      :header="title"
      width="800px"
      @close="close"
  >
    <div class="c_dialog">
      <!--  scrollToFirstError="smooth" -->
      <t-form ref="dialogForm" :data="formData" :rules="rules" @submit="submit">
        <!--护理计划名称-->
        <t-form-item label="护理计划名称" name="planName">
          <t-input
              v-model="formData.planName"
              :maxlength="10"
              show-limit-number
          >
          </t-input>
        </t-form-item>
        <!--        护理项目的列表-->
        <t-form-item label="护理项目" name="planName">
          <t-base-table
              bordered
              stripe
              size="small"
              row-key="index"
              :data="formData.projectPlans"
              :columns="ProjectPlancolumns"
          >
            <template #projectId="{ rowIndex }">
              <t-select
                  v-model="formData.projectPlans[rowIndex].projectId"
                  :options="projectList"
                  placeholder="请选择护理项目"
              ></t-select>
            </template>
            <template #executeTime="{ rowIndex }">
              <t-time-picker
                  v-model="formData.projectPlans[rowIndex].executeTime"
                  allow-input
                  format="HH:mm"
                  default-value="08:00"
                  size="small"
              />
            </template>
            <template #executeCycle="{ rowIndex }">
              <t-select
                  v-model="formData.projectPlans[rowIndex].executeCycle"
                  :options="cycleList"
              ></t-select>
            </template>
            <template #executeFrequency="{ rowIndex }">
              <t-input-number
                  v-model="formData.projectPlans[rowIndex].executeFrequency"
                  :min="1"
                  theme="column"
              />
            </template>
            <template #op="{ rowIndex }">
              <t-space>
                <t-button
                    theme="default"
                    variant="text"
                    @click="deleteProject(rowIndex)"
                >
                  <span style="font-size: large; font-weight: bold">-</span>
                </t-button>
                <t-button
                    v-if="rowIndex == 0"
                    theme="default"
                    variant="text"
                    @click="addProject"
                >
                  <span style="font-size: large; font-weight: bold">+</span>
                </t-button>
              </t-space>
            </template>
          </t-base-table>
        </t-form-item>
        <!--        表单的取消和确认按钮-->
        <t-form-item>
          <t-space size="small">
            <t-button theme="default" variant="base" @click="close">
              取消
            </t-button>
            <t-button theme="primary" type="submit"> 提交</t-button>
          </t-space>
        </t-form-item>
      </t-form>
    </div>
  </t-dialog>
</template>

<style scoped>
.c_dialog :deep(.t-form__label) {
  padding-right: 20px;
}

.c_dialog :deep(.t-input-number .t-input__wrap) {
  width: 100px;
}

.c_dialog :deep(.t-time-picker, .t-time-range-picker) {
  width: 110px;
}
</style>
